// 函数组件
import { useContext } from 'react';
import context from '../../utils/createContext'
import { useNavigate } from 'react-router-dom';
import { LoginS } from '../../interface';
import React from 'react';
import { Button, Form, Input, Card,message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import '../css/Login.less'

const Login: React.FC = () => {
  const value = useContext(context)
  const [messageApi, contextHolder] = message.useMessage();
  const navigator = useNavigate()
  const onFinish = async(val: LoginS.loginData) => {
    const res = await value.login(val)
    if(res.status === true){
      // navigator('/home/index/welcome')
      navigator(res.path)
    }else{
      messageApi.open({
        type: 'error',
        content: res.msg
        });
        return
    }
    
  };

  return (
    <div className='Login'>
      <div className='card'>
      {contextHolder}
        <fieldset className="login-contain">
        <legend className="legend">Sass商城后台管理系统</legend>
        <Form
          name="login"
          className='normal_login'
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="emplNumber"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
            initialValue="hjj@130.com"
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            name="pemplwd"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
            initialValue="130360"
          >
            <Input prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="清输入密码" />
          </Form.Item>
          <Form.Item
          >
            <Button type="primary" htmlType="submit" style={{width:'200px'}}> 登录</Button>
          </Form.Item>
        </Form>
        </fieldset>
      </div>
    </div>

  )
}

export default Login